<template>
  <div class="login-container">
    <div class="login-wrapper">
      <h3 class="login-title">系统登录</h3>
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
        <!-- 用户名输入框 -->
        <el-form-item prop="loginname">
          <el-input 
            v-model="loginForm.loginname" 
            placeholder="请输入用户名" 
            auto-complete="on"
          >
            <template #prefix>
              <el-icon class="icon"><User /></el-icon> <!-- 直接使用全局注册的User图标 -->
            </template>
          </el-input>
        </el-form-item>

        <!-- 密码输入框 -->
        <el-form-item prop="password">
          <el-input 
            :type="pwdType" 
            v-model="loginForm.password" 
            placeholder="请输入密码" 
            @keyup.enter="handleLogin"
          >
            <template #prefix>
              <el-icon class="icon"><Lock /></el-icon> <!-- 直接使用全局注册的Lock图标 -->
            </template>
          </el-input>
          <!-- 显示/隐藏密码图标 -->
          <span class="show-pwd" @click="showPwd">
            <el-icon v-if="pwdType === 'password'"><Eye /></el-icon> <!-- 直接使用全局注册的Eye图标 -->
            <el-icon v-else><EyeOpen /></el-icon> <!-- 直接使用全局注册的EyeOpen图标 -->
          </span>
        </el-form-item>

        <!-- 登录按钮 -->
        <el-form-item>
          <el-button 
            type="primary" 
            style="width: 100%;" 
            :loading="loading" 
            @click="handleLogin"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElForm, ElFormItem, ElInput, ElButton, ElIcon } from 'element-plus';

// 注意：这里不需要再导入图标了！全局已经注册过了
import router from '../router';
import httpInstance from '../utils/http';

// 表单数据和逻辑保持不变...
const loginForm = ref({
  loginname: '',
  password: ''
});

const loginRules = {
  loginname: [
    { required: true, trigger: 'blur', validator: (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    }}
  ],
  password: [
    { required: true, trigger: 'blur', validator: (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    }}
  ]
};

const loading = ref(false);
const pwdType = ref('password');
const loginFormRef = ref(null);

const showPwd = () => {
  pwdType.value = pwdType.value === 'password' ? 'text' : 'password';
};

const handleLogin = async () => {
  try {
    await loginFormRef.value.validate();
    loading.value = true;
    const res = await httpInstance.post('/eduservice/operator/login', loginForm.value);
    if (res.status === 200 && res.data) {
      sessionStorage.setItem('userInfo', JSON.stringify(res.data.operator));
      sessionStorage.setItem('username', loginForm.value.loginname);
      ElMessage.success('登录成功');
      router.push('/index/welcome');
    } else {
      ElMessage.error(res.message || '登录失败');
    }
  } catch (error) {
    if (error.name !== 'Error') {
      ElMessage.error('请完善登录信息');
    }
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.login-title {
  color: #409EFF; // 设置标题颜色为蓝色
}

.login-wrapper {
  color: #ffffff; // 设置整个登录框内的默认文字颜色为白色
}
/* 样式保持不变... */
$bg: #2d3a4b;
$form-bg: rgba(255, 255, 255, 0.1);
$input-bg: rgba(255, 255, 255, 0.05);
$input-border: rgba(255, 255, 255, 0.2);
$text-color: #fff;
$placeholder-color: rgba(255, 255, 255, 0.7);
$icon-color: #fff;

.login-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $bg;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.login-wrapper {
  width: 400px;
  background-color: $form-bg;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  padding: 30px;
  box-sizing: border-box;
}

/* 其他样式... */
</style>